<template>
  <section>
    <div>
      <HeadTop :title="headTitle"></HeadTop>
      <div class="head-time">{{new Date | format}}</div>
    </div>
    <div class="addClass">
      <div class="addClass-title">生物</div>
      <div class="addClass-line"></div>
      <div class="addClass-con" v-for="(v, idx) in msg1" :key="idx">
        <div class="addClass-con-name">游动</div>
        <div class="addClass-con-type" :class="{active : v === 0}" @click="inxChange(idx,v)">
          正常
          <img class="addClass-con-img" src="../../../assets/icon-active.png" v-if="v === 0"/>
        </div>
        <div class="addClass-con-type" :class="{active : v === 1}" @click="inxChange(idx,v)">
          异常
          <img class="addClass-con-img" src="../../../assets/icon-active.png" v-if="v === 1"/>
        </div>
      </div>
    </div>
    <div class="addClass">
      <div class="addClass-title">生物</div>
      <div class="addClass-line"></div>
      <div class="addClass-con" v-for="(v, idx) in msg2" :key="idx">
        <div class="addClass-con-name">游动</div>
        <div class="addClass-con-type" :class="{active : v === 0}" @click="inxChange2(idx,v)">
          正常
          <img class="addClass-con-img" src="../../../assets/icon-active.png" v-if="v === 0"/>
        </div>
        <div class="addClass-con-type" :class="{active : v === 1}"  @click="inxChange2(idx,v)">
          异常
          <img class="addClass-con-img" src="../../../assets/icon-active.png" v-if="v===1"/>
        </div>
      </div>
    </div>
    <div class="addClass">
      <div class="addClass-title">备注</div>
       <textarea  rows="2" class="addClass-title-text" v-model="tips"></textarea>
    </div>
    <div class="addClass-btn">
      <div class="addClass-btn-hold" @click="submit(0)">保存</div>
      <div class="addClass-btn-submit" @click="submit(1)">提交</div>
    </div>
  </section>
</template>
<script>
import { addPatrolReport } from '../../../api/index.js'
import HeadTop from '../../../components/headTop.vue'
import { getYYYYMMDD } from '../../../api/unit.js'
export default {
  data () {
    return {
      headTitle: '34号水草缸',
      msg1: [0, 0, 0],
      msg2: [0, 0, 0, 0],
      tips: ''
    }
  },
  filters: {
    format: function (value) {
      return getYYYYMMDD(value).nTime
    }
  },
  methods: {
    inxChange (idx, v) {
      let t = v === 0 ? 1 : 0
      this.msg1[idx] = t
      this.$forceUpdate()
    },
    inxChange2 (idx, v) {
      let t = v === 0 ? 1 : 0
      this.msg2[idx] = t
      this.$forceUpdate()
    },
    async submit (v) {
      let msg1 = this.msg1
      let msg2 = this.msg2
      let data = {
        fishTankId: 'a8e986eb-2d28-40cb-bdec-699c199d1e4c',
        biology1: msg1[0],
        biology2: msg1[1],
        biology3: msg1[2],
        equipment1: msg2[0],
        equipment2: msg2[1],
        equipment3: msg2[2],
        equipment4: msg2[3],
        remark: this.tips,
        submit: v
      }
      await addPatrolReport(data)
      this.$router.go(-1)
    }
  },
  components: {
    HeadTop
  }
}
</script>

<style scoped>
.head-time{
  width:750px;
  height:109px;
  background: #fff;
  border-top: #e5e5e5 2px solid;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size:32px;
  font-weight: bold;
}
.addClass{
  background: #fff;
  width: 686px;
  border-top: #e5e5e5 solid 17px;
  padding: 40px 32px;
  font-size: 32px;
  overflow: hidden;
}
.addClass-title{
  padding-bottom: 40px;
  font-weight: bold;
  margin-left: 5px;
}
.addClass-line{
  background-color: #e5e5e5;
  height: 1px;
  width: 686px;
}
.addClass-con{
  display: flex;
  /* height: 56px; */
  line-height: 56px;
  margin-top: 27px;
}
.addClass-con-name{
  margin-left: 13px;
  margin-right: 91px;
}
.addClass-con-type{
  width: 162px;
  line-height: 54px;
  border: 1px solid #ccc;
  color: #ccc;
  text-align: center;
  margin-right: 20px;
  font-size: 27px;
  position: relative;
}
.addClass-con-img{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 39px;
  height: 39px;
}
.active{
  border: 1px solid #3A8BD6;
}
.addClass-title-text{
  width: 675px;
  background: #e5e5e5;
  line-height: 54px;
  border: 1px solid #ccc;
}
.addClass-btn{
  width: 750px;
  background: #e5e5e5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 154px;
  font-size: 32px;
}
.addClass-btn-hold{
  width: 332px;
  height: 111px;
  line-height: 111px;
  text-align: center;
  background: #fff;
  font-weight: bold;
  color: #999;
}
.addClass-btn-submit{
  width: 332px;
  height: 111px;
  line-height: 111px;
  text-align: center;
  color: #009EEA;
  background: #fff;
  font-weight: bold;
}

</style>
